<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="500"
    >
      <div class="list-main">
        <van-row gutter="10">
          <van-col span="12" v-for="item in GoodsData" :key="item.id" @click="toGoodsInfo(item)">
            <div class="goods-info-box">
              <img :src="item.pict_url" class="goods-cover" alt="">
              <p class="goods-title"> {{item.title}} </p>
              <div class="bot-box">
                <div class="con-l">
                  <span class="text old-price">原价</span>
                  <span class="price text old-price">¥{{item.reserve_price}}</span>
                </div>
                <div class="con-c">
                  <span class="text">卷后价</span>
                  <span class="price">¥{{item.zk_final_price}}</span>
                </div>
                <div class="con-r">
                  <span class="text">已售</span>
                  <span class="text">{{item.volume}}</span>
                </div>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import { searchGoods } from '@/api/goods';
export default {
  name: "list",
  props: ['goodsWhere', 'searchGoodsName'],
  data() {
    return {
      active: 0,
      GoodsData: [],
      loading: false,
      finished: false,
      refreshing: false,
      query: {
        page: 1,
        limit: 18,
        q: '', //商品筛选-查询词
      }
    };
  },
  methods: {
    onLoad() {
      searchGoods(this.query).then(res => {
        if (this.refreshing) {
          this.GoodsData = [];
          this.refreshing = false;
        }
        if (res.length < 1) {
          this.finished = true
        }
        for(let i=0; i<res.length; i++) {
          this.GoodsData.push(res[i]);
        }
        this.loading = false;
        this.page++;
      })
    },

    //获取商品列表数据
    getGoodsData() {
      this.query.page = 1;
      searchGoods(this.query).then(res => this.GoodsData = res)
    },

    /**
     * 商品详情页
     * @param itemId 商品ID
     * @param couponShareUrl 链接-宝贝+券二合一页面链接
     * @param clickUrl 宝贝链接
     * @param url 宝贝链接
     */
    toGoodsInfo(goodsInfo){
      let goodsData = {
        web: 'info',
        title: goodsInfo.title,
        reserve_price: goodsInfo.reserve_price,
        zk_final_price: goodsInfo.zk_final_price,
        coupon_amount: goodsInfo.coupon_amount,
        volume: goodsInfo.volume,
        coupon_start_time: goodsInfo.coupon_start_time,
        coupon_end_time: goodsInfo.coupon_end_time,
        item_id: goodsInfo.item_id,
        click_url: goodsInfo.click_url,
        item_url: goodsInfo.item_url,
        coupon_share_url: goodsInfo.coupon_share_url,
        pict_url: goodsInfo.pict_url,
        url: goodsInfo.url
      };
      if(typeof goodsInfo.small_images == 'undefined'){
        goodsData.small_images = [goodsInfo.pict_url, goodsInfo.pict_url];
      }else{
        if(typeof goodsInfo.small_images.string == 'string'){
          goodsData.small_images = [goodsInfo.small_images.string, goodsInfo.small_images.string];
        }else{
          goodsData.small_images = goodsInfo.small_images.string;
        }
      }
      this.$router.push({
        name: 'info',
        query: goodsData
      })
    },
    //下拉加载
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.query.page = 1;
      this.onLoad();
    },
    //领取优惠券
    receive(coupon_share_url){
      window.location.href = coupon_share_url;
    }
  },
  //监听父级组件传递的商品物料ID及搜索的商品，更新商品列表数据
  watch: {
    searchGoodsName() {
      this.query.q = this.searchGoodsName;
      this.query.category_id = '';
      this.getGoodsData();
    },
    goodsWhere: {
      handler: function (value) {
        this.query = JSON.parse((JSON.stringify(this.query) + JSON.stringify(value)).replace(/}{/, ','));
        this.getGoodsData();
      },
      deep: true
    },
  }
}
</script>

<style scoped>
.list-main{
  padding:10px;
  box-sizing: border-box;
  background: white;
}
.goods-info-box{
  background: white;
  padding:10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
  0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07),
  0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
  transition: all 0.5s;
  box-sizing: border-box;
}
.goods-cover{
  height:140px;
  width: 100%;
  border-radius: 2px;
}
.goods-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height:16px;
  font-size: 14px;
  padding:2px 3px;
}
.share-box img{
  width: 22px;
  height: 22px;
}
.bot-box{
  display: flex;
  flex-direction:row;
  justify-content: space-between;
  font-size: 13px;
}
.bot-box > div{
  display: flex;
  flex-direction:column;
  justify-content: space-between;
  padding:3px;
  line-height: 16px;
  color:#999999;
}
.bot-box .price{
  color: red;
}
.bot-box .old-price{
  text-decoration:line-through;
}
</style>